@import '@/styles/token';

.markdown-custom-process {
  //border: 0.5px solid #e5e5e5;
  border-radius: 6px;
  margin: 16px 0;
  overflow: hidden;
  background: rgba(12, 20, 102, 4%);

  .process-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;

    .process-title {
      font-family: Monaco, Menlo, 'Ubuntu Mono', monospace;
      font-size: 14px;
      color: #333;
      font-weight: @fontWeightStrong;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: calc(100% - 146px);
    }

    .process-controls {
      display: flex;
      align-items: center;
      gap: 8px;

      .status-completed {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #52c41a;
        font-size: 12px;

        .anticon {
          font-size: 12px;
        }
      }

      .status-running {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #1890ff;
        font-size: 12px;

        .loading-spinner {
          width: 12px;
          height: 12px;
          border: 2px solid #f3f3f3;
          border-top: 2px solid #1890ff;
          border-radius: 50%;
          animation: spin 1s linear infinite;
        }
      }

      .status-error {
        color: #ff4d4f;
        font-size: 12px;
      }

      .control-btn {
        background: none;
        border: none;
        padding: 4px;
        cursor: pointer;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: all 0.2s;

        &:hover {
          background: #f0f0f0;
          color: #333;
        }

        .anticon {
          font-size: 14px;
          transition: transform 0.2s;
        }
      }
    }

    .process-controls-actions {
      padding-left: 8px;
      display: flex;
      align-items: center;
      gap: 8px;

      :global {
        .ant-btn .ant-btn-icon {
          color: rgba(0, 0, 0, 45%);
        }

        .ant-btn:not(:disabled):hover .ant-btn-icon {
          color: rgba(0, 0, 0, 88%);
        }
      }
    }
    @media screen and (max-width: 720px) {
      .process-title {
        width: calc(100% - 132px);
      }

      .process-controls {
        width: 128px;
        gap: 4px;

        .process-controls-actions {
          padding-left: 4px;
          gap: 4px;
        }
      }
    }
  }

  .process-content {
    padding: 16px;

    .default-content {
      p {
        margin: 8px 0;
        font-size: 14px;
        color: #666;
      }

      pre {
        background: #f6f8fa;
        padding: 12px;
        border-radius: 6px;
        overflow-x: auto;
        font-size: 12px;
        color: #333;
        margin: 8px 0;
      }
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
